<template>
	<view class="page">
		<view class="box flex_r_around">

			<!--  -->
			<view class="video" v-if="data.video" @click="onVideo">
				<video id="myVideo" :src="data.video" :autoplay="false" :loop="true" :danmu-list="danmuList" enable-danmu
					:show-play-btn="false" :show-fullscreen-btn="false" @play="onPlay"
					@pause="is_play = false"
					:show-center-play-btn="false"
					:controls="false"
					:poster="data.image"
				></video>

				<view class="play_icon flex_r_around" v-if="!is_play">
					<u-icon name="play-right-fill" size="36rpx" color="#FFF"></u-icon>
				</view>
			</view>

			<swiper v-else :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="swiper">
				<swiper-item v-for="(item,index) in data.images" class="item">
					<image :src="item" mode="widthFix"></image>
				</swiper-item>
			</swiper>
		</view>


		<view class="icon flex_c">
			<view class="item flex_c" @click="showLogin">
				<image :src="$util.prefix('public/home_icon1.png')" mode="aspectFill"></image>
				<text>{{ data.like_num || 0 }}</text>
			</view>
			<view class="item flex_c" @click="show_eval = true">
				<image :src="$util.prefix('public/home_icon2.png')" mode="aspectFill"></image>
				<text>{{ data.discuss_count || 0 }}</text>
			</view>
			<view class="item flex_c" @click="showLogin">
				<image :src="$util.prefix('public/home_icon3.png')" mode="aspectFill"></image>
				<text>{{ data.collect_num || 0 }}</text>
			</view>
			<view class="item flex_c" @click="showLogin">
				<image :src="$util.prefix('public/home_icon4.png')" mode="aspectFill"></image>
				<text>{{ data.collect_num || 0 }}</text>
			</view>
		</view>

		<view class="container" @click="showLogin">
			<view class="flex_center">
				<view class="address flex_center">
					<image :src="$util.prefix('public/address.png')" mode="aspectFill"></image>
					<text>{{ data.location_desc || '' }}</text>
				</view>
			</view>
			<view class="user flex_center">
				<view class="avatar">
					<image :src="data.avatar" mode="aspectFill"></image>
				</view>
				<view class="nickname hidden">
					{{ data.nickname || '' }}
				</view>

				<view class="follow flex_r_around">
					<u-icon name="plus" color="#FFF" bold size="24rpx"></u-icon>
				</view>

			</view>

			<view class="content_text hidden_3">
				{{ data.content }}
			</view>
		</view>

		<u-popup :show="show_eval" @close="show_eval = false" round="32rpx">
			<view class="popup flex_c">
				<view class="block">
					<scroll-view scroll-y="true" @scrolltolower="onReach">
						<view class="list flex_center" v-for="(item,index) in list" :key="index">
							<view class="avatar">
								<image :src="item.avatar" mode="aspectFill">
								</image>
							</view>
							<view class="list_content">
								<view class="nickname flex_center" @click="showLogin">
									<text class="hidden">{{ item.nickname || '' }}</text>
									<view v-if="data.user_id == item.user_id">作者</view>
								</view>
								<view class="content" @click="showLogin">{{ item.content }}
								</view>
								<view class="text flex_center" @click="showLogin">
									<view>
										<uni-dateformat :date="item.create_time" format="MM-dd"></uni-dateformat>
									</view>
									<!-- <view>27.31 km 昌平区</view> -->
									<text>回复</text>
								</view>

								<view class="child flex_center" v-for="(val,i) in item.child">
									<view class="child_avatar">
										<image :src="val.avatar" mode="aspectFill">
										</image>
									</view>
									<view class="child_content" @click.stop="showLogin">
										<view class="nickname flex_center">
											<text class="hidden">{{ val.nickname || '' }} </text>
											<text class="hidden" v-if="val.to_nickname"> 回复
												{{ val.to_nickname || '' }}</text>
											<view v-if="data.user_id == val.user_id">作者</view>
										</view>
										<view class="content">{{ val.content || '' }}</view>
										<view class="text flex_center">
											<view>
												<uni-dateformat :date="val.create_time" format="MM-dd"></uni-dateformat>
											</view>
											<!-- <view>27.31 km 昌平区</view> -->
											<text>回复</text>
										</view>
									</view>
								</view>

								<view class="more flex_center"
									v-if="item.child_num >= item.child.length && item.child_num!=0">
									<view class="border"></view>
									<view class="more_block flex_center" v-if="item.child_num > item.child.length"
										@click="showMore(item,index)">
										<text>展开{{ item.child_num }}条回复</text>
										<u-icon name="arrow-down" color="#999999" size="20rpx"></u-icon>
									</view>
									<view class="more_block flex_center" v-if="item.child_num == item.child.length"
										@click="hideMore(item,index)">
										<text>收起</text>
										<u-icon name="arrow-up" color="#999999" size="20rpx"></u-icon>
									</view>
								</view>
							</view>
						</view>

						<view style="height: 30rpx;"></view>
					</scroll-view>
				</view>

				<view class="input">
					<view class="inp flex_center">
						<input ref="evalInput" type="text" placeholder="友善言论，文明发言" placeholder-class="input-placeholder"
							v-model="content" @confirm="showLogin" />
					</view>
				</view>
			</view>
		</u-popup>

		<u-popup :show="show" mode="center" @close="show = false" bgColor="transparent">
			<view class="modal">
				<view class="text">需注册并下载APP体验完整功能</view>
				<view class="btn flex_r_between">
					<view class="item cancel flex_r_around" @click="show = false">
						<text>取消</text>
					</view>
					<view class="item submit flex_r_around" @click="toDownLoad">
						<text>去注册</text>
					</view>
				</view>

				<view class="modal_icon">
					<u-icon name="error-circle-fill" color="#FD2A53" size="112rpx"></u-icon>
				</view>
			</view>
		</u-popup>
		
		<u-popup :show="show_price" mode="center" @close="show_price = false" bgColor="transparent">
			<view class="modal">
				<view class="text">该视频为付费视频，请下载APP进行购买后观看</view>
				<view class="btn flex_r_between">
					<view class="item cancel flex_r_around" @click="show_price = false">
						<text>取消</text>
					</view>
					<view class="item submit flex_r_around" @click="toDownLoad">
						<text>去注册</text>
					</view>
				</view>
		
				<view class="modal_icon">
					<u-icon name="error-circle-fill" color="#FD2A53" size="112rpx"></u-icon>
				</view>
			</view>
		</u-popup>

		<view @touchmove.stop.prevent="preventHandler">
			<u-popup :show="show_register" mode="center" @close="show_register = false" bgColor="transparent">
				<view class="register flex_c">
					<view class="logo">
						<image :src="$util.prefix('logo.png')" mode="aspectFill"></image>
					</view>

					<view class="input flex_center">
						<input type="number" maxlength="11" placeholder="请输入手机号" placeholder-class="input-placeholder"
							v-model="mobile"/>
					</view>

					<view class="input flex_center">
						<input type="number" maxlength="6" placeholder="请输入验证码" placeholder-class="input-placeholder"
							v-model="code" />
						<view class="code_btn" @click="getCode">
							{{sending ? `已发送${num}` : '获取验证码'}}
						</view>
					</view>

					<view class="text flex_center">
						<i>*</i>
						<text>手机号用于验证并绑定账号</text>
					</view>

					<view class="register_btn flex_r_around" @click="onSubmit">
						<text>确定</text>
					</view>

				</view>
			</u-popup>
		</view>

		<u-popup :show="show_two" mode="center" @close="show_two = false" bgColor="transparent">
			<view class="modal2 flex_c">
				<view class="modal_icon flex_center">
					<u-icon name="close-circle" color="#CCCCCC" size="48rpx" @click="show_two = false"></u-icon>
				</view>
				<view class="title">注册成功</view>
				<view class="text">请到应用市场搜索《超圈》体验完整版</view>
				<view class="btn flex_r_between">
					<view class="item submit flex_r_around" @click="onDownLoad">
						<text>去下载</text>
					</view>
				</view>
			</view>
		</u-popup>

		<u-popup :show="show_outside" @close="show_outside = false" mode="top">
			<view class="openout flex_r_between">
				<view class="left">
					<image :src="$util.prefix('index/logo.png')" mode="aspectFill"></image>
					<text>安装超圈</text>
					<view class="flex_center">
						<i>点击右上角</i>
						<u-icon name="more-dot-fill" color="#666666" size="40rpx"></u-icon>
					</view>
					<view>
						<i>选择在浏览器中打开</i>
					</view>
				</view>

				<view class="right">
					<image :src="$util.prefix('index/h5_to.png')" mode="aspectFill"></image>
				</view>
			</view>
		</u-popup>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				data: {},

				list: [],
				total: 0,
				page: 1,

				danmuList: [
					// {
					// 	text: '第 1s 出现的弹幕',
					// 	color: '#FFF',
					// 	time: 1
					// },
					// {
					// 	text: '第 3s 出现的弹幕',
					// 	color: '#FFF',
					// 	time: 3
					// }
				],

				videoContext: null,

				is_play: false,

				show_eval: false,

				content: '',

				show: false,
				show_register: false,
				show_two: false,
				show_outside: false,

				pid: 0,
				mobile: '',
				code: '',
				num: 60,
				sending: false,

				is_micromessenger: false,

				an_url: '',
				ios_url: '',
				
				muted: true,
				
				show_price: false,
			}
		},
		methods: {

			preventHandler() {
				return;
			},

			getDetail(article_id) {
				this.$get('/article/getInfo', {
					article_id: article_id
				}).then(res => {
					this.data = res.data;
					if (this.data.images) {
						this.data.images = res.data.images.split(',');
					}
					this.getDiscuss();
				})
			},

			getDiscuss() {
				this.$get('/article/getDiscuss', {
					article_id: this.data.id,
					pid: 0,
					page: this.page
				}).then(res => {
					this.total = res.data.total;
					res.data.data.forEach(element => {
						element.child = [];
						element.page = 0;
						this.list.push(element);
					})
				})
			},
			
			
			onPlay(){
				this.is_play = true;
				// this.muted = false;
			},

			// 控制播放和暂停
			onVideo(e) {
				if(Number(this.data.watch_price) > 0){
					this.show_price = true;
					return;
				}
				if (this.is_play) {
					this.videoContext.pause();
				} else {
					this.videoContext.play();
				}
			},

			onReach() {
				if (this.total > this.list.length) {
					this.page++;
					this.getDiscuss();
				}
			},

			showMore(item, index) {
				item.page++;
				this.$get('/article/getDiscuss', {
					article_id: this.data.id,
					pid: item.id,
					page: item.page
				}).then(res => {
					this.list[index].child.push(...res.data.data);
				})
			},

			hideMore(item, index) {
				this.list[index].page = 0;
				this.list[index].child = [];
			},

			showLogin() {
				this.show_eval = false;
				this.videoContext.pause();
				this.is_play = false;
				if (this.is_micromessenger) {
					this.show_outside = true;
				} else {
					this.show = true;
				}
			},

			toDownLoad() {
				this.show = false;
				this.show_price = false;
				// this.$util.toUrl(`/pages/share/invite?pid=${this.pid}&circle_id=${this.circle_id}`);
				this.show_register = true;
			},

			onSubmit() {
				if (!this.mobile) {
					return uni.showToast({
						title: '请填写手机号',
						icon: "none"
					});
				}
				if (!this.code) {
					return uni.showToast({
						title: '请填写验证码',
						icon: "none"
					});
				}

				this.$post('/login/register', {
					code: this.code,
					mobile: this.mobile,
					pid: this.pid,
					circle_id: this.circle_id
				}, false, (res => {
					if (res.code == 5500) {
						this.show_register = false;
						this.show_two = true;
					} else {
						this.show_download = false;
						this.$util.msg(res.msg);
					}
				})).then(res => {
					this.show_register = false;
					this.show_two = true;
				});
			},

			onDownLoad() {
				if (this.is_micromessenger) {
					this.show = false;
					this.show_register = false;
					this.show_outside = true;
				} else {
					var type = uni.getSystemInfoSync().platform;
					if (type == 'ios') {
						window.open(this.ios_url)
					} else {
						window.open(this.an_url)
					}
				}
			},

			getDownLoadUrl() {
				this.$post("/index/getApkVersion").then(res => {
					this.an_url = res.data.app_path
					this.ios_url = res.data.ios_path
				})
			},
			
			getCode() {
				if (!this.mobile) {
					return uni.showToast({
						title: '请填写手机号',
						icon: "none"
					});
				}
			
				this.$post('/index/sendSms', {
					mobile: this.mobile,
					scene: 102
				}).then(res => {
					this.$util.msg('已发送');
					this.afterCode()
				})
			},
			
			afterCode() {
				this.sending = true;
				var timer = setInterval(() => {
					this.num--;
					if (this.num == 1) {
						clearInterval(timer)
						this.num = 60;
						this.sending = false;
					}
				}, 1000)
			},

		},

		onLoad(option) {
			if (option.id) {
				this.getDetail(option.id);
			}

			let ua = navigator.userAgent.toLowerCase();
			if (ua.match(/MicroMessenger/i) == "micromessenger") {
				this.is_micromessenger = true;
			} else {
				this.is_micromessenger = false;
			}
			this.pid = option.pid || 0;

			this.getDownLoadUrl();
			
		},

		onReady() {
			this.videoContext = uni.createVideoContext('myVideo');
		}
	}
</script>

<style lang="less" scoped>
	.page {
		height: 100vh;
	}

	.box {
		position: fixed;
		top: 0;
		left: 0;
		height: 100vh;
		width: 100vw;
		z-index: 1;

		.video {
			width: 100%;
			height: 100%;
			position: relative;

			video {
				width: 100%;
				height: 100%;
				display: block;
			}

			.play_icon {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translateX(-50%);
				width: 80rpx;
				height: 80rpx;
				background: rgba(0, 0, 0, .8);
				border-radius: 40rpx;
			}
		}

		.swiper {
			width: 100%;
			height: 100%;

			.item {
				width: 100%;
				height: 100%;

				image {
					width: 100%;
				}
			}

		}
	}

	.icon {
		width: 20vw;
		position: fixed;
		right: 0;
		bottom: 200rpx;
		z-index: 3;

		.item {
			margin-top: 32rpx;

			image {
				width: 56rpx;
				height: 56rpx;
			}

			text {
				font-size: 28rpx;
				color: #FFFBFB;
				margin-top: 4rpx;
			}
		}
	}

	.container {
		width: 80vw;
		position: fixed;
		left: 0;
		bottom: 100rpx;
		z-index: 3;
		padding: 0 32rpx;

		.address {
			max-width: 320rpx;
			height: 64rpx;
			background: rgba(0, 0, 0, 0.4);
			border-radius: 8rpx;
			padding: 18rpx 20rpx;
			margin-bottom: 24rpx;

			image {
				width: 28rpx;
				height: 28rpx;
				margin-right: 12rpx;
			}

			text {
				font-size: 24rpx;
				color: #FFFFFF;
			}
		}

		.user {
			overflow: hidden;

			.avatar {
				width: 98rpx;
				height: 98rpx;
				border-radius: 49rpx;
				overflow: hidden;
				border: 2rpx solid #FFF;

				image {
					width: 98rpx;
					height: 98rpx;
				}
			}

			.nickname {
				font-weight: 500;
				font-size: 40rpx;
				color: #FFFBFB;
				margin: 0 12rpx 0 24rpx;
				max-width: 300rpx;
			}

			.follow {
				width: 32rpx;
				height: 32rpx;
				background: #FD2A53;
				border-radius: 16rpx;
			}
		}

		.content_text {
			margin-top: 30rpx;
			font-size: 28rpx;
			color: #FFFBFB;
			line-height: 40rpx;
		}
	}

	.popup {
		height: 70vh;
		padding: 32rpx 0;
		overflow: hidden;

		.block {
			flex: 1;
			width: 100%;
			padding: 0 32rpx;
		}

		scroll-view {
			height: 100%;
		}

		.list {
			overflow: hidden;
			align-items: flex-start;
			width: 100%;
			margin-bottom: 40rpx;

			.avatar {
				width: 72rpx;
				height: 72rpx;
				border-radius: 72rpx;
				overflow: hidden;
				margin-right: 16rpx;
				background: #D8D8D8;

				image {
					width: 72rpx;
					height: 72rpx;
				}
			}

			.list_content {
				flex: 1;

				.nickname {
					text {
						font-size: 24rpx;
						color: #999999;
						line-height: 34rpx;
						max-width: 300rpx;
					}

					view {
						font-size: 24rpx;
						color: #FFFFFF;
						padding: 0rpx 6rpx;
						background: #FD2A53;
						border-radius: 4rpx;
						margin-left: 8rpx;
					}
				}

				.content {
					font-size: 28rpx;
					color: #333333;
					line-height: 40rpx;
					margin: 4rpx 0;
				}

				.text {
					view {
						font-size: 24rpx;
						color: #999999;
						line-height: 34rpx;
						margin-right: 12rpx;
					}

					text {
						font-size: 24rpx;
						color: #333333;
						line-height: 34rpx;
					}
				}

				.child {
					align-items: flex-start;
					margin-top: 24rpx;

					.child_avatar {
						width: 40rpx;
						height: 40rpx;
						background: #D8D8D8;
						border-radius: 20rpx;
						overflow: hidden;
						margin-right: 16rpx;

						image {
							width: 40rpx;
							height: 40rpx;
						}
					}

					.child_content {
						flex: 1;

						.nickname {
							font-size: 24rpx;
							color: #999999;
							line-height: 34rpx;
						}

						.content {
							font-size: 28rpx;
							color: #333333;
							line-height: 40rpx;
						}

						.text {
							font-size: 24rpx;
							color: #999999;
							line-height: 34rpx;
						}

					}
				}

				.more {
					margin-top: 32rpx;

					.border {
						width: 40rpx;
						height: 2rpx;
						background: #CCCCCC;
					}

					.more_block {
						margin-left: 26rpx;

						text {
							font-size: 24rpx;
							color: #666666;
							line-height: 34rpx;
							margin-right: 6rpx;
						}
					}
				}

			}


		}

		.input {
			padding: 20rpx 32rpx 30rpx;
			width: 750rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -2rpx 0rpx 0rpx rgba(230, 230, 230, 0.5);

			.tag {
				#select {
					background: #FDEFF2;
					border: 2rpx solid #FD2A53;

					text {
						color: #FD2A53;
					}
				}

				.item {
					margin-right: 16rpx;
					width: 176rpx;
					height: 56rpx;
					background: #F1F1F1;
					border-radius: 28rpx;

					image {
						width: 32rpx;
						height: 32rpx;
						margin-right: 6rpx;
					}

					text {
						font-size: 26rpx;
						color: #333333;
						line-height: 32rpx;
					}
				}
			}

			.inp {
				height: 80rpx;
				background: #F1F1F1;
				border-radius: 40rpx;
				padding: 0 24rpx;
				margin-top: 20rpx;

				input {
					width: 100%;
					font-size: 28rpx;
					color: #333;
				}
			}
		}
	}

	.modal {
		width: 616rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		padding: 104rpx 44rpx 44rpx;

		.text {
			font-size: 28rpx;
			color: #666666;
			line-height: 40rpx;
			text-align: center;
		}

		.btn {
			margin-top: 42rpx;

			.item {
				width: 248rpx;
				height: 88rpx;
				border-radius: 44rpx;

				text {
					font-size: 28rpx;
					line-height: 40rpx;
				}
			}

			.cancel {
				background: #F1F1F1;

				text {
					color: #333333;
				}
			}

			.submit {
				background: #FD2A53;

				text {
					color: #FFF;
				}
			}
		}

		.modal_icon {
			position: absolute;
			top: -50rpx;
			left: 50%;
			transform: translateX(-50%);
			background: #FFF;
			border-radius: 50%;
		}

	}

	.register {
		width: 600rpx;
		height: 632rpx;
		background: #FFFFFF;
		border-radius: 32rpx;
		padding-top: 30rpx;

		.logo {
			width: 128rpx;
			height: 128rpx;
			background: #FD4545;
			border-radius: 16rpx;
			overflow: hidden;

			image {
				width: 128rpx;
				height: 128rpx;
			}
		}

		.input {
			width: 480rpx;
			height: 88rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			border: 2rpx solid #F1F1F1;
			padding: 0 24rpx;
			margin: 32rpx 0 0;

			input {
				flex: 1;
			}

			.code_btn {
				font-weight: 500;
				font-size: 26rpx;
				color: #FD2A53;
				margin-left: 20rpx;
			}
		}

		.text {
			margin: 32rpx 0;

			text {
				font-size: 22rpx;
				color: #999999;
			}

			i {
				color: #FD2A53;
				font-style: normal;
			}
		}

		.register_btn {
			width: 480rpx;
			height: 88rpx;
			background: #FD2A53;
			border-radius: 48rpx;

			text {
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}

	}

	.modal2 {
		width: 616rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		padding: 16rpx 44rpx 62rpx;

		.title {
			font-weight: 500;
			font-size: 36rpx;
			color: #FD2A53;
			line-height: 50rpx;
			margin: 16rpx 0 8rpx;
		}

		.text {
			font-size: 28rpx;
			color: #666666;
			line-height: 40rpx;
		}

		.btn {
			margin-top: 42rpx;

			.item {
				height: 88rpx;
				border-radius: 44rpx;
				width: 320rpx;

				text {
					font-size: 28rpx;
				}
			}

			.submit {
				background: #FD2A53;

				text {
					color: #FFF;
				}
			}
		}

		.modal_icon {
			width: 100%;
			flex-direction: row-reverse;
		}
	}

	.openout {
		background: rgba(255, 255, 255, .8);
		width: 100vw;
		padding: 32rpx 64rpx 32rpx 72rpx;

		.left {
			image {
				width: 174rpx;
				height: 66rpx;
				display: block;
				margin-bottom: 20rpx;
			}

			view {
				i {
					font-size: 28rpx;
					color: #666666;
					font-style: normal;
				}
			}

			text {
				font-size: 28rpx;
				color: #666666;
				display: block;
			}
		}

		.right {
			width: 90rpx;
			height: 188rpx;

			image {
				width: 90rpx;
				height: 188rpx;
				display: block;
			}
		}

	}
</style>